<template>
  <div class="content-container">
    <p-tooltip placement="topLeft" :title="value">
      <p-input
        v-if="isEdit"
        :value="value"
        :style="{ color: isSame ? 'inherit' : '#f5222d' }"
        @input="handleInput"
        @blur="handleBlur"
      />
      <span
        v-else
        class="ellipsis"
        :style="{ width: width, color: isSame ? 'inherit' : '#f5222d' }"
      >
        {{ value }}
      </span>
    </p-tooltip>
  </div>
</template>

<script>
import Decimal from 'decimal.js';

export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    isSame: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '80px',
    },
    toFixed: {
      type: Number,
      default: undefined,
    },
    min: {
      type: Number,
      default: undefined,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      let copy = value?.replace(/[^0-9]/gi, '');
      if (copy) {
        copy = Number(copy);
      }
      e.target.value = copy;
      this.$emit('change', copy);
    },
    handleBlur(e) {
      let value = e.target.value;
      if (this.toFixed !== undefined && value) {
        value = new Decimal(value).toFixed(2);
      }
      if (this.min !== undefined && Number(value) <= this.min) {
        value = '';
      }
      e.target.value = value;
      this.$emit('change', value);
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    margin-right: auto;
  }
  .icon {
    margin-left: 8px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}
</style>
